<template>
	<view class="animated fadeIn faster im-chat">
		<view class="status-bar-height bg-fff"></view>
		<view class="p-3 bg-fff d-flex">
			<view class="d-flex-item d-flex d-flex-middle" @click="goBack">
				<text class="iconfont icon-31fanhui1 color444 font32"></text>
			</view>
			<view class="d-flex-item d-flex d-flex-center d-flex-middle"><text class="font34">张小鸣</text></view>
			<view class="d-flex-item"></view>
		</view>
		<view class="msg-list">
			<scroll-view class="uni-im-msg-scroll-view" :scroll-anchoring="true" :enable-flex="true" :bounces="false"
			    :scroll-with-animation="false" :scroll-y="true" :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
			    @scroll="onScroll" @scrolltolower="onScrollToLower" :show-scrollbar="true">
			    <view class="scroll-content">
					
					<view class="uni-im-list-item">
						<view class="data-state-tip-box font26"><text>没有更多历史消息</text></view>
						<view class="uni-im-msg">
							<view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view>
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar02.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<view class="nickname-box">hellowk</view>
									<view class="msg-content-box">
										<view class="msg-text-box msg-text msg-content">
											<text class="msg-text">你好，今天在公司吗？</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="uni-im-list-item">
						<view class="uni-im-msg self">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar04.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<!-- <view class="nickname-box">hellowk</view> -->
									<view class="msg-content-box">
										<view class="msg-text-box self msg-text msg-content">
											<text class="msg-text">今天休息，明天在公司</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="uni-im-list-item">
						<view class="uni-im-msg">
							<view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view>
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar02.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<view class="nickname-box">hellowk</view>
									<view class="msg-content-box">
										<view class="msg-text-box msg-text msg-content">
											<text class="msg-text">明天下午有时间吗</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="uni-im-list-item">
						<view class="uni-im-msg self">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar04.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<!-- <view class="nickname-box">hellowk</view> -->
									<view class="msg-content-box">
										<view class="msg-text-box self msg-text msg-content">
											<text class="msg-text">明天下午2:30之后有时间</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-im-list-item">
						<view class="uni-im-msg self">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar04.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<!-- <view class="nickname-box">hellowk</view> -->
									<view class="msg-content-box">
										<view class="msg-text-box self msg-text msg-content">
											<text class="msg-text">有什么事情吗？</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="uni-im-list-item">
						<view class="uni-im-msg">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar02.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<view class="nickname-box">hellowk</view>
									<view class="msg-content-box">
										<view class="msg-text-box msg-text msg-content">
											<text class="msg-text">有个文具采购单需要你核对一下</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="uni-im-list-item">
						<view class="uni-im-msg self">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar04.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<!-- <view class="nickname-box">hellowk</view> -->
									<view class="msg-content-box">
										<view class="msg-text-box self msg-text msg-content">
											<text class="msg-text">主要采购那些文具呢？</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="uni-im-list-item">
						<view class="uni-im-msg">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar02.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<view class="nickname-box">hellowk</view>
									<view class="msg-content-box">
										<view class="msg-text-box msg-text msg-content">
											<text class="msg-text">中性笔和软抄本</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-im-list-item">
						<view class="uni-im-msg self">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar04.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<!-- <view class="nickname-box">hellowk</view> -->
									<view class="msg-content-box">
										<view class="msg-text-box self msg-text msg-content">
											<text class="msg-text">明天下午两点半到我办公室来吧</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-im-list-item">
						<view class="uni-im-msg">
							<!-- <view class="d-flex d-flex-center w-100"><text class="color999 font24">01/04 10:08</text></view> -->
							<view class="d-flex msg-box">
								<image src="https://www.168802.xyz/avatar/avatar02.png" style="width: 40px;height: 40px;border-radius: 5px;"></image>
								<view class="msg-main">
									<view class="nickname-box">hellowk</view>
									<view class="msg-content-box">
										<view class="msg-text-box msg-text msg-content">
											<text class="msg-text">嗯，好的</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view id="uni-im-list-last-item" key="uni-im-list-last-item">
						<!-- 高度为0的 最后一个元素用于方便滚动到最后一个元素 -->
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="chat-foot">
			<view class="d-flex d-flex-between d-flex-middle px-1 py-2">
				<view class="px-2 d-flex d-flex-middle">
					<text class="iconfont icon-yuyinqiehuan font40" style="color:#313131;font-size: 48rpx;"></text>
				</view>
				<input class="d-flex-item px-2 rounded10" style="background-color: #fbf9fa;border:solid 1px #e9e7e8;padding-top: 15rpx;padding-bottom: 15rpx;" placeholder="请输入内容" placeholder-class="colorhold font28" />
				<view class="pl-2 pr-1 d-flex d-flex-middle">
					<text class="iconfont icon-smiling font40" style="color:#313131;font-size: 48rpx;"></text>
				</view>
				<view class="pl-1 pr-2 d-flex d-flex-middle">
					<text class="iconfont icon-jia2 font40" style="color:#313131;font-size: 48rpx;"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop:0,
				scrollIntoView: "",
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			onScroll(e){
				console.log('onScroll',e)
			},
			onScrollToLower(e){
				console.log('onScrollToLower',e)
			}
		}
	}
</script>

<style scoped lang="scss">
page {
  height: 100%;
  background-color: #f3f4f6;
  box-sizing: border-box;
  display: flex;
  flex-direction: column
}
.chat-foot{
	background-color: #ffffff;
}

.uni-im-chat-input{
    padding: 0 5px;
}
.uni-im-chat-input .main{
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
}

.im-chat {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  .msg-list {
    /* height: 1px; 覆盖掉 组件内的height：100%，使得flex-grow: 1作用在容器内被撑开*/
    height: 1px !important;
    flex-grow: 1;
	position: relative;
  }
  

  
  .answer-msg {
    padding: 2px 10px;
    background-color: #eee;
    border-radius: 3px;
    margin-bottom: 10px;
    flex-direction: row;
    align-items: center;
    ::v-deep .uni-icons {
      margin-left: 5px;
    }
    /* #ifdef H5 */
    .close-icon{
      cursor: pointer;
    }
    @media screen and (min-device-width:960px){
      margin: 5px;
      margin-bottom: -18px;
      top: 0;
    }
    /* #endif */
    .answer-msg-text {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: #333;
    }
  }
  
  /* #ifdef H5 */
  .vue-codemirror {
    position: fixed;
    top: 100px;
    left: 50%;
    width: 500px;
  }
  
  /* #endif */
  
  /* #ifdef H5 */
  .unread_count {
    position: absolute;
    top: -30px;
    left: 70rpx;
    z-index: 10;
    background-color: #dfe2e9;
    padding: 0 14rpx;
    height: 14px;
    line-height: 14px;
    border-radius: 9px;
    color: #0c1013;
    font-size: 12px;
    margin-top: 3px;
  }
  /* #endif */
}

.uni-im-msg-scroll-view {
    overflow-anchor: auto !important;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    // 上下翻转
    transform: scale(1, -1);
    
    .scroll-content {
      min-height: 100%;
	  display: flex;
	  align-items: stretch;
      flex-direction: column-reverse;
    }
    
    & ::v-deep .uni-scroll-view {
      /* 滚动条的样式 */
      &::-webkit-scrollbar {
        width: 5px;  /* 滚动条宽度 */
      }
      /* 滚动条滑块的样式 */
      &::-webkit-scrollbar-thumb {
        background-color: #bbb;  /* 滑块颜色 */
        border-radius: 5px;  /* 滑块圆角 */
      }
    }
  }

  

  /* #ifdef H5 */
  @media screen and (min-device-width:960px) {
    .uni-im-msg-scroll-view {
      // 关闭上下翻转
      transform: scale(1, 1);
      .scroll-content {
        flex-direction: column;
      }
    }
  }
  /* #endif */
  
  .uni-im-list-item {
	  transform: scale(1, -1);
	  // .uni-im-msg {
   //      width: 0;
   //      flex-grow: 1;
   //  }
}

.data-state-tip-box {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: #bfbfbf;
    margin-bottom: -5px;
	height: 50px;
}

.uni-im-msg {
  position: relative;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.uni-im-msg .msg-box {
    position: relative;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 20rpx;
}
.uni-im-msg .msg-main{
	margin: 0 8px;
	margin-right: 40px;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	width: 0;
	flex-grow: 1;
}
.uni-im-msg .msg-content-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.nickname-box{
	font-size: 14px;
	color: #666;
	margin-bottom: 3px;
	padding-left: 2px;
}
.msg-text-box{
	display: flex;
    // border-radius: 10px;
	border-radius: 0 12px 12px 12px;
    background-color: #ffffff;
    min-width: 30px;
    flex-shrink: 1;
}
.msg-text-box .msg-text{
    padding: 10px;
    font-size: 15px;
    word-break: break-all;
    cursor: text;
}
.uni-im-msg.self .msg-box {
    flex-direction: row-reverse;
}
.uni-im-msg.self .msg-main {
    align-items: flex-end;
    margin-right: 8px;
    margin-left: 40px;
}
.uni-im-msg.self .msg-main .msg-content-box{
    justify-content: flex-end;
}
.msg-text-box.self{
	border-radius: 12px 0 12px 12px;
    background-color: #faeceb;
}
</style>
